<template>
    <div>
        <el-popover placement="right" width="400px" trigger="click">
            <div class="addlist">
                <h4>新增用户</h4>
                <label for="">姓名</label>
                <input type="text" placeholder="请输入姓名" v-model="inputName">
                <br>
                <label for="">年龄</label>
                <input type="text" placeholder="请输入年龄" v-model="inputage">
                <br>
                <label for="">性别</label>
                <span>男</span>
                <input type="radio" name="sex" value="男" class="sex" v-model="inputsex">
                <span>女</span>
                <input type="radio" name="sex" value="女" class="sex" v-model="inputsex">
                <br>
                <label for="">日期</label>
                <input type="text" v-model="value1" placeholder="输入出生日期 x-x-x" class="data">
                <br>
                <label for="">地址</label>
                <input type="text" placeholder="请输入地址" v-model="inputaddress">
                <br>
                <button @click="cancel">取消</button>
                <button @click="confirm">确定</button> 
            </div>
            <el-button slot="reference" class="add">+ 新增</el-button>
            <input type="text" placeholder="请输入名字" slot="reference" class="shuru1" v-model="search">
            <button slot="reference" class="sous1" @click="searchB">搜索</button>
        </el-popover>
        <br>
        <el-table :data="showarr" style="width: 100%">
            <el-table-column label="姓名" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 0px">{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column label="年龄" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 0px">{{ scope.row.age }}</span>

                </template>
            </el-table-column>
            <el-table-column label="性别" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 0px">{{ scope.row.gender }}</span>
                </template>
            </el-table-column>
            <el-table-column label="日期" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 0px">{{ scope.row.date }}</span>
                </template>
            </el-table-column>
            <el-table-column label="地址" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 0px">{{ scope.row.address }}</span>

                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-popover placement="right" width="200px" trigger="click" popper-class="editpopover">
                        <el-tooltip class="item" effect="dark" content="用户姓名" placement="top">
                            <el-input v-model="editList.name" placeholder="输入修改姓名" clearable></el-input>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="用户年龄" placement="top">
                            <el-input v-model="editList.age" placeholder="输入修改年龄" clearable></el-input>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="用户性别" placement="top">
                            <el-radio-group v-model="editList.gender">
                                <el-radio label="男"></el-radio>
                                <el-radio label="女"></el-radio>
                            </el-radio-group>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="用户日期" placement="top">
                            <el-input v-model="editList.date" placeholder="输入修改日期" clearable></el-input>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="用户地址" placement="top">
                            <el-input v-model="editList.address" placeholder="输入修改地址" clearable></el-input>
                        </el-tooltip>
                        <button @click="save">保存</button>
                        <el-button size="mini" slot="reference" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    </el-popover>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <gonggong></gonggong>
        </div>
    </div>
</template>

<script>
import bus from "../JS/bus";
export default {
    data() {
        return {
            value1: '',
            showarr: [],//给用户展示的数据
            pageSize: 5,
            tableData: [],//拿到Vuex里面的原始数据
            inputName: '',
            inputage: '',
            inputsex: '',
            inputaddress: '',
            id: 66,
            search: '',
            arr: [],
            // 编辑按钮
            visibe: false,
            editList: []//编辑展示的数据

        }
    },
    methods: {
        // 编辑用户
        handleEdit(index, row) {
            this.visibe = true
            for (let index = 0; index < this.tableData.length; index++) {
                if (this.$store.state.showData[index].id == row.id) {
                    this.editList = this.$store.state.showData[index]
                }
            }
            console.log(this.editList);
        },
        // 修改后的用户保存
        save() {
            if (this.editList.year == '') {
                this.$message({
                    message: '输入出生日期',
                    type: 'warning'
                });
            } else if (this.editList.name == '') {
                this.$message({
                    message: '输入姓名',
                    type: 'warning'
                });
            } else if (this.editList.age == '') {
                this.$message({
                    message: '输入年龄',
                    type: 'warning'
                });
            } else if (this.editList.sex == '') {
                this.$message({
                    message: '输入性别',
                    type: 'warning'
                });
            } else if (this.editList.dz == '') {
                this.$message({
                    message: '输入地址',
                    type: 'warning'
                });
            } else {
                this.$store.dispatch('AceditList', this.editList)
                this.$message({
                    message: '修改成功',
                    type: 'success'
                });
                this.visibe = false
            }
        },
        // 删除
        handleDelete(index, row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$store.dispatch('Acdeleteuserlist', row.id)
                this.tableData = this.$store.state.showData
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 搜索
        searchB() {
            if (this.search !== '') {
                this.arr = this.tableData.filter((p) => {
                    return p.name.includes(this.search) == true
                })
                bus.$emit('changdata', this.arr)
            }
        },
        // 增加用户列表按钮
        confirm() {
            let obj = {
                id: 66,
                age: this.inputage,
                gender: this.inputsex,
                name: this.inputName,
                date: this.value1,
                address: this.inputaddress
            }
            obj.id = this.id++
            this.$store.dispatch('Acuserlist', obj)
            // 强制页面刷新
            this.$forceUpdate()
        },
        // 取消按钮
        cancel() {
            this.inputage = '',
                this.inputsex = '',
                this.inputName = '',
                this.value1 = '',
                this.inputaddress = ''
        }
    },
    // 从分页其中拿到传来的数据
    created() {
        bus.$on("send2", (val) => {
            // console.log(val);
            this.showarr = val
        });
        this.tableData = this.$store.state.showData
        // console.log(this.$store.state.showData);
    },
    watch: {
        tableData: {
            handler() {
                bus.$emit('changdata', this.tableData)
            },
            immediate: true
        },
        search() {
            if (this.search == '') {
                bus.$emit('changdata', this.tableData)
            }
        }
    }
}
</script>
<style lang="less" scoped>
.el-popover {
    button {
        border: 0px;
        width: 3vw;
        height: 5vh;
        border-radius: 2px;
        background-color: rgb(85, 118, 190);
    }

    button:hover {
        background-color: rgba(73, 106, 176, 0.662);
    }
}

.addlist {
    button {
        margin-left: 35px;
        margin-top: 10px;
        border: 0px;
        width: 3vw;
        height: 5vh;
        background-color: rgb(85, 118, 190);
    }

    button:hover {
        background-color: rgba(73, 106, 176, 0.662);
    }

    input {
        margin-left: 10px;
    }

    span {
        margin-left: 10px;
    }
}

.editpopover {
    width: 724px;
    height: 25px;
}
</style>
<style lang="less" scoped>
.el-input {
    width: 176px;
    margin-left: 5px;
    margin-top: -10px;
    // outline: 1px solid red;
}

button {
    margin-left: 5px;
}

.el-radio-group {
    margin-left: 5px;

}

.shuru1,
.sous1 {
    position: relative;
    left: 360px;
}

.shuru1 {
    width: 18vw;
    height: 5vh;
    // outline: 1px solid red;
}

.sous1 {
    width: 3vw;
    height: 5vh;
    border: 0px;
    border-radius: 2px;
    background-color: rgb(85, 118, 190);
}

.sous1:hover {
    background-color: rgba(73, 106, 176, 0.662);
}

.add {
    position: relative;
    left: -360px;
    background-color: rgb(85, 118, 190);
    color: white;
    // outline: 1px solid red;
}

.add:hover {
    background-color: rgba(73, 106, 176, 0.662);
}

.block {
    top: calc(100vh - 60px);
    left: calc(100vw - 500px);
}</style>